<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/api.css" />
		<link rel="stylesheet" type="text/css" href="../../css/style.css" />
		<link rel="stylesheet" type="text/css" href="../../css/btnplus.css" />
		<style type="text/css">
			html,body{
				background-color: #fff;
			}
			.add_line{ background:#fff url(../../image/img_05.jpg) no-repeat 0 0; background-size: 100% 140px;}
			.add_line .top{ padding: 12px 15px 25px;}
			.add_line .top p{ font-size: 12px; color: #fff; line-height: 25px;}
			.add_line .top li{ float: left; overflow: hidden;}
			.add_line .top input{ display:block; width: 100%; background-color: transparent; font-size: 18px; font-weight:500; color: #fff; border-bottom: 0.5px #fff solid; text-align: center; padding: 12px 0;}
			.add_line .top .text_input{ width: 35%;}
			.add_line .top .r_right{ width: 30%;}
			.add_line .top img{ margin: 21px auto 0; height: 6px;}
			.add_line .list{ background-color: #fff; border-radius: 25px 20px 0 0; padding: 10px 15px 10px; overflow: hidden;}
			.add_line .list div{ display:block; position:relative;  font-size: 12px; font-weight: 400; color: #3262F1; line-height: 40px; height: 40px;}
			.add_line .list div span { width: 100px; position: absolute; right: 0px; text-align:right; }
			.add_line .list div span:active{ color:#f6f6f6; }
			.add_line .list li{ float: left; width: 23.5%; margin-right: 2%; margin-bottom: 8px; text-align: center; font-size: 14px; color: #333; line-height: 36px; background-color: #f6f6f6; border-radius: 3px; white-space: nowrap;text-overflow: ellipsis; overflow: hidden;}
			.add_line .list li:active{ background-color: #1c63fa; color: #fff;}
			.add_line .list li:nth-child(4n+4){ margin-right: 0;}
			.add_line .list li.on{ background-color: #1c63fa; color: #fff;}
			.sk-three-bounce {
			  margin: 0 auto;
			  width: 80px;
			  text-align: center; }
			  .sk-three-bounce .sk-child {
				width: 13.5px;
				height: 13.5px;
				background-color: #3262F1;
				border-radius: 100%;
				display: inline-block;
				-webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
						animation: sk-three-bounce 1.4s ease-in-out 0s infinite both; }
			  .sk-three-bounce .sk-bounce1 {
				-webkit-animation-delay: -0.32s;
						animation-delay: -0.32s; }
			  .sk-three-bounce .sk-bounce2 {
				-webkit-animation-delay: -0.16s;
						animation-delay: -0.16s; }

			@-webkit-keyframes sk-three-bounce {
			  0%, 80%, 100% {
				-webkit-transform: scale(0);
						transform: scale(0); }
			  40% {
				-webkit-transform: scale(1);
						transform: scale(1); } }

			@keyframes sk-three-bounce {
			  0%, 80%, 100% {
				-webkit-transform: scale(0);
						transform: scale(0); }
			  40% {
				-webkit-transform: scale(1);
						transform: scale(1); }
			}
			.more{ padding: 1.20rem 0; text-align: center; font-size: 0.26rem; color: #999; line-height: 0.60rem;}
			.display-none{ visibility:hidden; }
			.text-center { text-align: center !important; }
		</style>
	</head>
	<body>
		<div class="add_line">
			<div class="top">
				<p id="slogo">请选择出发地</p>
				<ul class="clearfix">
					<li class="text_input"><input id="sendarea" type="text" value="" readonly /></li>
					<li class="r_right"><img src="../../image/img_35.png" alt="" /></li>
					<li class="text_input"><input id="destarea" type="text" value="" readonly /></li>
				</ul>
			</div>
			<div class="list">
				<div class="display-none" id="btnprev"><span tapmode onclick="prev();">返回上一步</span></div>
				<ul class="clearfix" id="arealist">
				</ul>
				<script id="arealist_template" type="text/template">
				{{ for (var i = 0, len = it.length; i < len; i++) { }}
				<li tapmode onclick="selArea(this,{{=i}});" data-id="{{=it[i].id}}">{{=it[i].name}}</li>
				{{ } }}
				</script>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/app.js"></script>
	<script type="text/javascript" src="../../script/doT.js"></script>
	<script type="text/javascript">
		var areatype = '';
		var provinceJson, cityJson, areaJson;
		var sendprovinceId = '', sendcityId = '', sendareaId = '', sendprovinceName = '', sendcityName = '', sendareaName = '';
		var destprovinceId = '', destcityId = '', destareaId = '', destprovinceName = '', destcityName = '', destareaName = '';
		var curlevel = 'province';
		var fromwin = '';
		apiready = function() {
			api.parseTapmode();
			areatype = api.pageParam.areatype;
			if(areatype == 'dest') {
				$api.text($api.byId('slogo'),'请选择目的地');
			}
			fromwin = api.pageParam.fromwin;
			sendprovinceId = api.pageParam.sendprovinceId;
			if(typeof(sendprovinceId)=="undefined"){
				sendprovinceId = '';
			}
			sendcityId = api.pageParam.sendcityId;
			if(typeof(sendcityId)=="undefined"){
				sendcityId = '';
			}
			sendareaId = api.pageParam.sendareaId;
			if(typeof(sendareaId)=="undefined"){
				sendareaId = '';
			}
			sendprovinceName = api.pageParam.sendprovinceName;
			if(typeof(sendprovinceName)=="undefined"){
				sendprovinceName = '';
			}
			sendcityName = api.pageParam.sendcityName;
			if(typeof(sendcityName)=="undefined"){
				sendcityName = '';
			}
			sendareaName = api.pageParam.sendareaName;
			if(typeof(sendareaName)=="undefined"){
				sendareaName = '';
			}
			var sendarea = sendcityName + ' ' + sendareaName;
			if(sendarea.trim() == '')
			{
				sendarea = sendcityName;
			}
			if(sendarea.trim() == '')
			{
				sendarea = sendprovinceName;
			}
			$api.val($api.byId('sendarea'), sendarea);
			getJsonFromAPI();
			api.addEventListener({
                name: 'navitembtn'
            }, function(ret, err) {
                if (ret.type == 'left') {
					api.closeWin({
					});
                }
				else if (ret.type == 'right') {
					addlines();
                }
            });
		}
		function addlines() {
			if(sendprovinceId=='')
			{
				toast("请选择出发地");
				return false;
			}
			api.showProgress({
				title: '请稍后...',
				text: '',
				modal: true
			});
			var paramsObj = {
				sendprovinceId: sendprovinceId,
				sendcityId: sendcityId,
				sendareaId: sendareaId,
				destprovinceId: destprovinceId,
				destcityId: destcityId,
				destareaId: destareaId,
				type: 'add'
			}
			console.log(JSON.stringify(paramsObj));
			api.getPrefs({
				key: 'user_info'
			}, function(ret, err) {
				if (ret && ret.value)
				{
					var userinfo = JSON.parse(ret.value);
					api.ajax({
						url: ApiUrl + '/v1/lines',
						method: 'post',
						cache: false,
						timeout: 10,
						headers: {
							authorization: kAppKey+';'+userinfo.access_token+';'+userinfo.uid
						},
						data: {
							values: paramsObj
						}
					}, function(ret, err) {
						api.hideProgress();
						if (ret) {
							api.sendEvent({
								name : 'refreshlines'
							});
							openAlert();
						} else {
							console.log(JSON.stringify(err));
							toast(err.body.error);
						}
					});
				}
			});
			
			
		}
		function openAlert()
		{
			var icon = 'sucess.png';
			var title = '线路添加成功';
			var msg = '';
			var winname = fromwin;
			var btntxt = '返回';
			var param = {
				icon: icon,
				title: title,
				msg: msg,
				btntxt: btntxt,
				winname: winname,
			};
			openNavWin('#ddd','noheadmsg_win','../public/noheadmsg_frm.html','接单线路',false,true,false,[],param);
		}
		function getJsonFromAPI() {

			api.readFile({
				path: 'widget://res/cityextra.json'
			}, function(ret, err) {
				if (ret.status) {
					var data = ret.data;
					provinceJson = $api.strToJson(data);
					if(areatype == 'dest')
					{
						var ndata = {"name":"全国","id":"0","sub":[]};
						provinceJson.splice(0, 0, ndata); //首位插入全国
					}
					UpdateList('arealist','arealist_template',provinceJson);
					
				} else {
					//alert(err.msg);
				}
			});
		}
		function prev() {
			//返回上一步
			if(curlevel == 'city')
			{
				$api.addCls($api.byId('btnprev'),'display-none');

				if(areatype == 'send')
				{
					sendprovinceId = '';
					sendcityId = '';
					sendareaId = '';
					$api.val($api.byId('sendarea'),'');
				}
				else
				{
					destprovinceId = '';
					destcityId = '';
					destareaId = '';
					//destarea = areaName;
					$api.val($api.byId('destarea'),'');
					
					api.setNavBarAttr({
						rightButtons: []
					});
				}
				curlevel = 'province';
				UpdateList('arealist','arealist_template',provinceJson);	
			}
			else if(curlevel == 'area')
			{
				if(areatype == 'send')
				{
					sendcityId = '';
					sendareaId = '';
					$api.val($api.byId('sendarea'),sendprovinceName);
				}
				else
				{
					destcityId = '';
					destareaId = '';
					$api.val($api.byId('destarea'),destprovinceName);
					
					api.setNavBarAttr({
						rightButtons: []
					});
				}
				curlevel = 'city';
				UpdateList('arealist','arealist_template',cityJson);	
			}
			else if(curlevel == 'areaed')
			{
				if(areatype == 'send')
				{
					sendareaId = '';
					$api.val($api.byId('sendarea'),sendcityName);
				}
				else
				{
					destareaId = '';
					$api.val($api.byId('destarea'),destcityName);
				}
				curlevel = 'area';
				UpdateList('arealist','arealist_template',cityJson);	
			}
		}
		function selArea(obj,index) {
			var areaId = $api.attr(obj,'data-id');
			var areaName = $api.text(obj);
			
			if(curlevel == 'province')
			{
				if(areaId == 0)
				{
					//选择了全国
					if(areatype == 'dest')
					{
						destprovinceId = '';
						destcityId = '';
						destareaId = '';
						destprovinceName = areaName;
						$api.val($api.byId('destarea'),areaName);
					}
					var liList = document.getElementById("arealist").children;
					for (var i = 0; i < liList.length; i++) {
						$api.removeCls(liList[i], 'on')
					}
					$api.addCls(obj,'on');
					//完成设置
					api.setNavBarAttr({
						rightButtons: [{
							text: '完成',
							color:'#3262F1',
							fontSize:15
						}]
					});
				}
				else
				{
					if(areatype == 'send')
					{
						sendprovinceId = areaId;
						sendprovinceName = areaName;
						$api.val($api.byId('sendarea'),areaName);
					}
					else
					{
						destprovinceId = areaId;
						destprovinceName = areaName;
						$api.val($api.byId('destarea'),areaName);
						api.setNavBarAttr({
							rightButtons: []
						});
					}
					curlevel = 'city';
					$api.removeCls($api.byId('btnprev'),'display-none');
					cityJson = provinceJson[index].sub;
					UpdateList('arealist','arealist_template',cityJson);
				}
			}
			else if(curlevel == 'city')
			{
				if(areaId == 0)
				{
					//选择了全省
					if(areatype == 'send')
					{
						sendcityId = '';
						sendareaId = '';
						$api.val($api.byId('sendarea'),sendprovinceName);
						
						//跳转到设置目的地页面
						var areajson = {
							sendprovinceId: sendprovinceId,
							sendcityId: sendcityId,
							sendareaId: sendareaId,
							sendprovinceName: sendprovinceName,
							sendcityName: sendcityName,
							sendareaName: sendareaName,
							areatype: 'dest',
							fromwin: fromwin
						};
						openNavWin('#fff','addlinesdest_win','addlines_frm.html','设置目的地',false,false,true,[],areajson);
					}
					else
					{
						destcityId = '';
						destareaId = '';
						//destarea = areaName;
						$api.val($api.byId('destarea'),destprovinceName);
						var liList = document.getElementById("arealist").children;
						for (var i = 0; i < liList.length; i++) {
							$api.removeCls(liList[i], 'on')
						}
						$api.addCls(obj,'on');
						//完成设置
						api.setNavBarAttr({
							rightButtons: [{
								text: '完成',
								color:'#3262F1',
								fontSize:15
							}]
						});
					}
					
				}
				else
				{
					if(areatype == 'send')
					{
						sendcityId = areaId;
						sendcityName = areaName;
						$api.val($api.byId('sendarea'),areaName);
					}
					else
					{
						destcityId = areaId;
						destcityName = areaName;
						$api.val($api.byId('destarea'),areaName);
						
						api.setNavBarAttr({
							rightButtons: []
						});
					}
					curlevel = 'area';
					areaJson = cityJson[index].sub;
					UpdateList('arealist','arealist_template',areaJson);
				}
			}
			else if(curlevel == 'area')
			{
				if(areaId == 0)
				{
					//选择了市
					if(areatype == 'send')
					{
						sendareaId = '';
						$api.val($api.byId('sendarea'),sendcityName);
						
						//跳转到设置目的地页面
						var areajson = {
							sendprovinceId: sendprovinceId,
							sendcityId: sendcityId,
							sendareaId: sendareaId,
							sendprovinceName: sendprovinceName,
							sendcityName: sendcityName,
							sendareaName: sendareaName,
							areatype: 'dest',
							fromwin: fromwin
						};
						openNavWin('#fff','addlinesdest_win','addlines_frm.html','设置目的地',false,false,true,[],areajson);
					}
					else
					{
						destareaId = '';
						//destarea = areaName;
						$api.val($api.byId('destarea'),destcityName);
						
						//完成设置
						api.setNavBarAttr({
							rightButtons: [{
								text: '完成',
								color:'#3262F1',
								fontSize:15
							}]
						});
					}
					
				}
				else
				{
					if(areatype == 'send')
					{
						sendareaId = areaId;
						sendareaName = areaName;
						$api.val($api.byId('sendarea'), sendcityName + ' ' + areaName);
					}
					else
					{
						destareaId = areaId;
						destareaName = areaName;
						$api.val($api.byId('destarea'), destcityName + ' ' + areaName);
						
					}
					//curlevel = 'areaed'; //已选县区
				}
				var liList = document.getElementById("arealist").children;
				for (var i = 0; i < liList.length; i++) {
					$api.removeCls(liList[i], 'on')
				}
				$api.addCls(obj,'on');
				if(areatype == 'send')
				{
					//跳转到设置目的地页面
					var areajson = {
						sendprovinceId: sendprovinceId,
						sendcityId: sendcityId,
						sendareaId: sendareaId,
						sendprovinceName: sendprovinceName,
						sendcityName: sendcityName,
						sendareaName: sendareaName,
						areatype: 'dest',
						fromwin: fromwin
					};
					openNavWin('#fff','addlinesdest_win','addlines_frm.html','设置目的地',false,false,true,[],areajson);
				}
				else
				{
					//显示完成按钮
					api.setNavBarAttr({
						rightButtons: [{
							text: '完成',
							color:'#3262F1',
							fontSize:15
						}]
					});
				}
			}
		}
		//渲染数据
		function UpdateList(domId,templateId,jsondata) {
			
			var act_content = $api.byId(domId);
			//act_content.innerHTML = '';
			$api.html(act_content,'');
			setTimeout(function() {
				var tempFn = doT.template($api.byId(templateId).innerHTML);
				var resultText = tempFn(jsondata);
				//act_content.innerHTML = resultText;
				$api.html(act_content, resultText);
				api.parseTapmode();
			}, 0);
			
		}
	</script>
</html>